A different colored line above/below a threshold

By using the clip() function the Line chart can be drawn in two passes so as to color it differently.

Update
There's information on this HOWTO page about creating dual color line charts using gradients. It's very simple and can be done using either the RGraph Gradient() shortcut or more directly with the canvas linear gradient functionality.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250" !style="border: 1px solid #ccc">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var data      = [14,16,18,19,29,28,29,35,34,38,41,45,56,58,65];
        var threshold = 40;
        var color1    = 'red';
        var color2    = 'green'




        /**
        * First draw a chart that will enable us to get the Y coordinate. This chart is not shown
        */
        var line = new RGraph.Line({
            id: 'cvs',
            data: data,
            options: {
                gutterTop: 5,
                gutterBottom: 45,
                linewidth: 3,
                tickmarks: 'endcircle',
                hmargin: 10,
                colors: [color1],
                textAccessible: true
            }
        }).draw()



        /**
        * Now get the Y coord
        */
        var y = line.getYCoord(threshold);




        /**
        * Clear the canvas
        */
        RGraph.Clear(line.canvas);




        /**
        * Now draw the chart that will become the red half
        */
        line.context.save();
            line.context.beginPath();
            line.context.rect(0,0,line.canvas.width, y);
            line.context.clip();

            // Draw the line again
            line.Draw();

        line.context.restore();




        /**
        * Now draw the chart that will become the green half
        */
        line.context.save();
            line.context.beginPath();
            line.context.rect(0,y,line.canvas.width, line.canvas.height);
            line.context.clip();

            var line = new RGraph.Line({
                id: 'cvs',
                data: data,
                options: {
                    gutterTop: 5,
                    gutterBottom: 45,
                    colors: [color2],
                    linewidth: 3,
                    tickmarks: 'endcircle',
                    hmargin: 10,
                    textAccessible: true,
                    labels: ['Alf','Bert','Charlie','Dave','Edgar','Fliss','Gary','Hoolio','Indigo','Jack','Kevin','Lou','Martha','Neil','Olga']
                }
            }).draw()
            

        line.context.restore();
    };
</script>